@charset "UTF-8";
@font-face {
    font-family: 'codropsicons';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/codropsicons/codropsicons.eot');
    src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

body {
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #515158;
    background: #2A2844;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    text-decoration: none;
    color: #FFFFFF;
    outline: none;
}

a:hover,
button:hover {
    color: #515158;
    outline: none;
}

a:focus,
button:focus {
    outline: none;
}

.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Icons */
.icon {
    display: block;
    width: 1em;
    height: 1em;
    margin: 0 auto;
    fill: currentColor;
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* Header */

.codrops-header {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 5.25em 0em 0em 1em;
    text-align: center;
    background: url("../img/logo/logo.png") no-repeat 1em 1em;
    background-size: 5em;
}

.codrops-header h1 {
    font-size: 1.15em;
    line-height: 1;
    color: #00CAFF;
    margin: 0;
    font-weight: bold;
}

.logout {
    display: block;
    position: absolute;
    left: 0em;
    bottom: 0;
    color: #00B5FF;
    padding: 1em 0 1em 1.8em;
    line-height: 1.2em;
    font-size: .8em;
    cursor: pointer;
    font-weight: bold;
    background: url("../img/icon/logout.png") no-repeat .5em center;
    background-size: 1em;
    /*transition: all 300ms;*/
}

.logout:hover {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    color: #CCCCCC;
}

.backToIndex {
    display: block;
    position: absolute;
    left: 8.5em;
    top: 0;
    color: #00B5FF;
    padding: 1em 0 1em 1.8em;
    line-height: 1.2em;
    font-size: .8em;
    cursor: pointer;
    font-weight: bold;
    background: url("../img/icon/back.png") no-repeat .5em center;
    background-size: 1em;
    /*transition: all 300ms;*/
}

.backToIndex:hover {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    color: #CCCCCC;
}

/* Top Navigation Style */

.codrops-links {
    position: relative;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.codrops-links::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
    transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
    display: inline-block;
    width: 1.5em;
    margin: 0.5em;
    padding: 0em 0;
    text-decoration: none;
}

.codrops-icon span {
    display: none;
}

.codrops-icon::before {
    font-family: 'codropsicons';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    margin: 0 5px;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon--drop::before {
    content: '\e001';
    color: #09c;
}

.codrops-icon--prev::before {
    content: '\e004';
}

.main {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: calc(100vw - 258px);
    height: 100vh;
}

.mall {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-perspective: 3500px;
    perspective: 3500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.mall.mall--content-open {
    -webkit-transform: translate3d(0, -10.5%, 0) scale3d(1, 1, 1);
    transform: translate3d(0, -10.5%, 0) scale3d(1, 1, 1);
}

.surroundings,
.levels {
    position: absolute;
    top: 50%;
    left: 50%;
}

.surroundings {
    width: 192vmin;
    /* double of mall map */
    height: 128vmin;
    margin: -64vmin 0 0 -96vmin;
    pointer-events: none;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.surroundings__map {
    opacity: 0.3;
    max-width: 100%;
    display: block;
}

.surroundings--hidden {
    opacity: 0;
}

.levels {
    width: 96vmin;
    height: 64vmin;
    margin: -32vmin 0 0 -48vmin;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.surroundings {
    background: url("../img/floor1/BG.svg") no-repeat left top;
    background-size: 100%;
    opacity: 0.3;
}

.surroundings,
.levels {
    -webkit-transform: rotateX(72deg) rotateZ(-45deg) translateZ(-15vmin);
    transform: rotateX(72deg) rotateZ(-45deg) translateZ(-15vmin);
}

.level {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.level::after {
    font-size: 2.5vmin;
    line-height: 0;
    position: absolute;
    z-index: 100;
    top: -1em;
    left: 3.5em;
    white-space: nowrap;
    color: #7d7d86;
    -webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
    transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
    -webkit-transition: -webkit-transform 1s, color 0.3s;
    transition: transform 1s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.level:hover::after,
.level--current::after {
    color: yellow;
}

.level.level--current::after {
    -webkit-transform: rotateZ(0deg) rotateX(0deg) translateZ(0vmin) translateX(0vmin) translateY(0vmin);
    transform: rotateZ(0deg) rotateX(0deg) translateZ(0vmin) translateX(0vmin) translateY(0vmin); /*rotateZ(0deg) rotateX(30deg) translateZ(-22vmin) translateX(5vmin) translateY(-10vmin)*/
}

.level::after {
    content: attr(data-floor);
    color: #71c8f9;
}

.level:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}

.level--2 {
    -webkit-transform: translateZ(8vmin);
    transform: translateZ(8vmin);
    background: url("../img/floor1/L1.svg") no-repeat left top;
    background-size: 100%;
}

.level--3 {
    -webkit-transform: translateZ(16vmin);
    transform: translateZ(16vmin);
    background: url("../img/floor1/L2.svg") no-repeat left top;
    background-size: 100%;
}

.level--4 {
    -webkit-transform: translateZ(24vmin);
    transform: translateZ(24vmin);
    background: url("../img/floor1/L3.svg") no-repeat left top;
    background-size: 100%;
}

.level--5 {
    -webkit-transform: translateZ(32vmin);
    transform: translateZ(32vmin);
    background: url("../img/floor1/L4.svg") no-repeat left top;
    background-size: 100%;
}

.level--6 {
    -webkit-transform: translateZ(40vmin);
    transform: translateZ(40vmin);
    background: url("../img/floor1/L5.svg") no-repeat left top;
    background-size: 100%;
}

/* Selection transitions */

.levels--selected-1 .level:not(.level--1),
.levels--selected-2 .level:not(.level--2),
.levels--selected-3 .level:not(.level--3),
.levels--selected-4 .level:not(.level--4),
.levels--selected-5 .level:not(.level--5),
.levels--selected-6 .level:not(.level--6),
.levels--selected-7 .level:not(.level--7),
.levels--selected-8 .level:not(.level--8),
.levels--selected-9 .level:not(.level--9),
.levels--selected-10 .level:not(.level--10),
.levels--selected-11 .level:not(.level--11),
.levels--selected-12 .level:not(.level--12),
.levels--selected-13 .level:not(.level--13),
.levels--selected-14 .level:not(.level--14),
.levels--selected-15 .level:not(.level--15),
.levels--selected-16 .level:not(.level--16),
.levels--selected-17 .level:not(.level--17),
.levels--selected-18 .level:not(.level--18),
.levels--selected-19 .level:not(.level--19) {
    opacity: 0;
    pointer-events: none;
    /* fade out all others */
}

/* Other levels */

.level--current ~ .level {
    -webkit-transform: translateZ(90vmin);
    transform: translateZ(90vmin);
}

.levels--selected-2 .level--1,
.levels--selected-3 .level--1,
.levels--selected-4 .level--1,
.levels--selected-5 .level--1,
.levels--selected-6 .level--1,
.levels--selected-7 .level--1,
.levels--selected-8 .level--1,
.levels--selected-9 .level--1,
.levels--selected-10 .level--1,
.levels--selected-11 .level--1,
.levels--selected-12 .level--1,
.levels--selected-13 .level--1,
.levels--selected-14 .level--1,
.levels--selected-15 .level--1,
.levels--selected-16 .level--1,
.levels--selected-17 .level--1,
.levels--selected-18 .level--1,
.levels--selected-19 .level--1,
.levels--selected-20 .level--1,
.levels--selected-3 .level--2,
.levels--selected-4 .level--2,
.levels--selected-5 .level--2,
.levels--selected-6 .level--2,
.levels--selected-7 .level--2,
.levels--selected-8 .level--2,
.levels--selected-9 .level--2,
.levels--selected-10 .level--2,
.levels--selected-11 .level--2,
.levels--selected-12 .level--2,
.levels--selected-13 .level--2,
.levels--selected-14 .level--2,
.levels--selected-15 .level--2,
.levels--selected-16 .level--2,
.levels--selected-17 .level--2,
.levels--selected-18 .level--2,
.levels--selected-19 .level--2,
.levels--selected-20 .level--2,
.levels--selected-4 .level--3,
.levels--selected-5 .level--3,
.levels--selected-6 .level--3,
.levels--selected-7 .level--3,
.levels--selected-8 .level--3,
.levels--selected-9 .level--3,
.levels--selected-10 .level--3,
.levels--selected-11 .level--3,
.levels--selected-12 .level--3,
.levels--selected-13 .level--3,
.levels--selected-14 .level--3,
.levels--selected-15 .level--3,
.levels--selected-16 .level--3,
.levels--selected-17 .level--3,
.levels--selected-18 .level--3,
.levels--selected-19 .level--3,
.levels--selected-20 .level--3,
.levels--selected-5 .level--4,
.levels--selected-6 .level--4,
.levels--selected-7 .level--4,
.levels--selected-8 .level--4,
.levels--selected-9 .level--4,
.levels--selected-10 .level--4,
.levels--selected-11 .level--4,
.levels--selected-12 .level--4,
.levels--selected-13 .level--4,
.levels--selected-14 .level--4,
.levels--selected-15 .level--4,
.levels--selected-16 .level--4,
.levels--selected-17 .level--4,
.levels--selected-18 .level--4,
.levels--selected-19 .level--4,
.levels--selected-20 .level--4,
.levels--selected-6 .level--5,
.levels--selected-7 .level--5,
.levels--selected-8 .level--5,
.levels--selected-9 .level--5,
.levels--selected-10 .level--5,
.levels--selected-11 .level--5,
.levels--selected-12 .level--5,
.levels--selected-13 .level--5,
.levels--selected-14 .level--5,
.levels--selected-15 .level--5,
.levels--selected-16 .level--5,
.levels--selected-17 .level--5,
.levels--selected-18 .level--5,
.levels--selected-19 .level--5,
.levels--selected-20 .level--5,
.levels--selected-7 .level--6,
.levels--selected-8 .level--6,
.levels--selected-9 .level--6,
.levels--selected-10 .level--6,
.levels--selected-11 .level--6,
.levels--selected-12 .level--6,
.levels--selected-13 .level--6,
.levels--selected-14 .level--6,
.levels--selected-15 .level--6,
.levels--selected-16 .level--6,
.levels--selected-17 .level--6,
.levels--selected-18 .level--6,
.levels--selected-19 .level--6,
.levels--selected-20 .level--6,
.levels--selected-8 .level--7,
.levels--selected-9 .level--7,
.levels--selected-10 .level--7,
.levels--selected-11 .level--7,
.levels--selected-12 .level--7,
.levels--selected-13 .level--7,
.levels--selected-14 .level--7,
.levels--selected-15 .level--7,
.levels--selected-16 .level--7,
.levels--selected-17 .level--7,
.levels--selected-18 .level--7,
.levels--selected-19 .level--7,
.levels--selected-20 .level--7,
.levels--selected-9 .level--8,
.levels--selected-10 .level--8,
.levels--selected-11 .level--8,
.levels--selected-12 .level--8,
.levels--selected-13 .level--8,
.levels--selected-14 .level--8,
.levels--selected-15 .level--8,
.levels--selected-16 .level--8,
.levels--selected-17 .level--8,
.levels--selected-18 .level--8,
.levels--selected-19 .level--8,
.levels--selected-20 .level--8,
.levels--selected-10 .level--9,
.levels--selected-11 .level--9,
.levels--selected-12 .level--9,
.levels--selected-13 .level--9,
.levels--selected-14 .level--9,
.levels--selected-15 .level--9,
.levels--selected-16 .level--9,
.levels--selected-17 .level--9,
.levels--selected-18 .level--9,
.levels--selected-19 .level--9,
.levels--selected-20 .level--9,
.levels--selected-11 .level--10,
.levels--selected-12 .level--10,
.levels--selected-13 .level--10,
.levels--selected-14 .level--10,
.levels--selected-15 .level--10,
.levels--selected-16 .level--10,
.levels--selected-17 .level--10,
.levels--selected-18 .level--10,
.levels--selected-19 .level--10,
.levels--selected-20 .level--10,
.levels--selected-12 .level--11,
.levels--selected-13 .level--11,
.levels--selected-14 .level--11,
.levels--selected-15 .level--11,
.levels--selected-16 .level--11,
.levels--selected-17 .level--11,
.levels--selected-18 .level--11,
.levels--selected-19 .level--11,
.levels--selected-20 .level--11,
.levels--selected-13 .level--12,
.levels--selected-14 .level--12,
.levels--selected-15 .level--12,
.levels--selected-16 .level--12,
.levels--selected-17 .level--12,
.levels--selected-18 .level--12,
.levels--selected-19 .level--12,
.levels--selected-20 .level--12,
.levels--selected-14 .level--13,
.levels--selected-15 .level--13,
.levels--selected-16 .level--13,
.levels--selected-17 .level--13,
.levels--selected-18 .level--13,
.levels--selected-19 .level--13,
.levels--selected-20 .level--13,
.levels--selected-15 .level--14,
.levels--selected-16 .level--14,
.levels--selected-17 .level--14,
.levels--selected-18 .level--14,
.levels--selected-19 .level--14,
.levels--selected-20 .level--14,
.levels--selected-16 .level--15,
.levels--selected-17 .level--15,
.levels--selected-18 .level--15,
.levels--selected-19 .level--15,
.levels--selected-20 .level--15,
.levels--selected-17 .level--16,
.levels--selected-18 .level--16,
.levels--selected-19 .level--16,
.levels--selected-20 .level--16,
.levels--selected-18 .level--17,
.levels--selected-19 .level--17,
.levels--selected-20 .level--17,
.levels--selected-19 .level--18,
.levels--selected-20 .level--18,
.levels--selected-20 .level--19 {
    -webkit-transform: translateZ(-60vmin);
    transform: translateZ(-60vmin);
}

/* Delays */
/* 1 */

/*.levels--selected-1 .level--3,*/
/*.levels--selected-2 .level--3,*/
/*.levels--selected-3 .level--2,*/
/*.levels--selected-4 .level--2 {*/
/*-webkit-transition-delay: 0.1s;*/
/*transition-delay: 0.1s;*/
/*}*/

/*.levels--selected-1 .level--2,*/
/*.levels--selected-2 .level--current,*/
/*.levels--selected-2 .level--current::after,*/
/*.levels--selected-3 .level--current,*/
/*.levels--selected-3 .level--current::after,*/
/*.levels--selected-4 .level--3 {*/
/*-webkit-transition-delay: 0.25s;*/
/*transition-delay: 0.25s;*/
/*}*/

/*.levels--selected-1 .level--current,*/
/*.levels--selected-1 .level--current::after,*/
/*.levels--selected-4 .level--current,*/
/*.levels--selected-4 .level--current::after {*/
/*-webkit-transition-delay: 0.45s;*/
/*transition-delay: 0.45s;*/
/*}*/

/* Current level */

.level.level--current {
    -webkit-transform: translateZ(15vmin) rotateX(-69.75deg) rotateY(-45deg) rotateZ(14deg);
    transform: translateZ(15vmin) rotateX(-69.75deg) rotateY(-45deg) rotateZ(14deg);
}

/* Navigation classes */
.levels--open .level,
.levels--open .level::after {
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.levels--open .level.level--current {
    opacity: 1;
}

.levels--open .level.level--moveOutUp,
.levels--open .level.level--moveOutDown {
    opacity: 0;
}

.levels--open .level.level--moveOutUp {
    -webkit-transform: translateZ(90vmin);
    transform: translateZ(90vmin);
}

.levels--open .level.level--moveOutDown {
    -webkit-transform: translateZ(-60vmin);
    transform: translateZ(-60vmin);
}

/* Level nav */
.mallnav {
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
}

.mallnav--hidden {
    pointer-events: none;
    opacity: 0;
}

/* Box button */
.boxbutton {
    font-size: 1.625em;
    display: block;
    width: 2em;
    height: 2em;
    margin: 0;
    padding: 0;
    color: #fff;
    border: 0;
    background: #4A4A60;
}

.boxbutton--dark {
    background: rgba(0, 0, 0, 0.5);
}

.boxbutton--darker {
    background: #2c2c2f;
}

.boxbutton--alt {
    background: #3d1975;
}

.boxbutton--disabled,
.boxbutton--disabled:focus,
.boxbutton--disabled:hover {
    cursor: default;
    pointer-events: none;
    opacity: 0.2;
}

/* Level map */

.map__ground {
    fill: #d7d7dc;
}

.map__outline {
    -webkit-transition: fill 0.3s;
    transition: fill 0.3s;
    fill: #bbb;
}

.level:hover .map__outline,
.level--current .map__outline {
    fill: #a6a3a8;
}

.map__tree {
    fill: #7bad7f;
}

.map__lake {
    fill: #a2bbdd;
}

.map__space {
    -webkit-transition: fill-opacity 0.8s;
    transition: fill-opacity 0.8s;
    fill: #bdbdbd;
    fill-opacity: 0.6;
}

.level--current .map__space {
    fill-opacity: 1;
}

.map__space--selected {
    fill: #A4A4A4;
}

/* Content */
.content {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 28.5%;
}

.doorOperate {
    position: absolute;
    bottom: 1.5vmin;
    width: 16vmin;
    left: calc(10% - 2vmin);
    clear: both;
}

.doorOperate .operateBtn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    float: left;
    color: #FFFFFF;
    font-size: 1em;
    background-color: #008ED3;
    border-radius: .2em;
    padding: .2em 0;
    width: 7vmin;
    text-align: center;
}

.doorOperate .operateBtn:last-child {
    float: right;
}

.doorOperate .operateBtn:hover {
    opacity: .8;
}

.content__item {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #333167;
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    padding: 5vmin 10% 3vmin 25%;
    background-repeat: no-repeat;
    background-position: 10%;
    background-size: 16vmin;
}

.content__item[data-category="1"] {
    background-image: url("../img/category/bt_1.png");
}

.content__item[data-category="2"] {
    background-image: url("../img/category/bt_2.png");
}

.content__item[data-category="3"] {
    background-image: url("../img/category/bt_3.png");
}

.content__item[data-category="4"] {
    background-image: url("../img/category/bt_4.png");
}

.content--open .content__item {
    -webkit-transition: none;
    transition: none;
}

.content__item--current {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.content__item-title {
    padding: 0 .2em;
    text-align: left;
    resize: none;
    color: #71C8F9;
    min-width: 5em;
    max-width: 20em;
    height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.2em;
}

.content__item-title:empty:before {
    content: attr(placeholder);
    color: #757575;
}

.content__item-title:focus {
    content: none;
}

.content__status {
    color: #FFFFFF;
    background-color: #32B06D;
    border-radius: .4em;
    padding: .2em 0;
    width: 3.25em;
    text-align: center;
    margin-left: .8em;
    height: 2em;
}

.content__desc {
    padding: .2em;
    text-align: left;
    margin-top: .8em;
    width: 100%;
    resize: none;
    color: #FFFFFF;
}

/*.content__item[data-category='1'] .content__item-title {*/
/*color: #7cbf7f;*/
/*}*/

/*.content__item[data-category='2'] .content__item-title {*/
/*color: #6584c7;*/
/*}*/

/*.content__item[data-category='3'] .content__item-title {*/
/*color: #dc4b7c;*/
/*}*/

/*.content__item[data-category='4'] .content__item-title {*/
/*color: #8d65e0;*/
/*}*/

.content__item--hover .content__item-title {
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.content__item--current .content__item-title {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.content__item-details {
    opacity: 0;
    margin: 0 auto;
    max-width: 50vmax;
}

.content__item--current .content__item-details {
    opacity: 1;
}

.content__meta {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.5;
}

.content__meta-item {
    display: inline-block;
    padding: 0 0.25em;
}

.content__meta .icon {
    display: inline-block;
    vertical-align: middle;
}

.content__button {
    position: absolute;
    top: -93%;
    right: .6em;
    width: 1em;
    height: 1em;
    -webkit-transition: opacity 0.3s 0.7s;
    transition: opacity 0.3s 0.7s;
    border-radius: 50%;
}

.content__button--hidden {
    pointer-events: none;
    opacity: 0;
    -webkit-transition: none;
    transition: none;
}

/* Spaces list (sidebar) */

.spaces-list {
    position: absolute;
    top: 0;
    right: 0;
    width: 258px;
    min-height: 100vh;
    padding: 5em 0 1em;
    background: #202024;
    color: #FFFFFF;
}

.search {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: calc(100vw - 258px);
}

.spaces-list--open .search__input {
    margin: 1em 8% 0 2%;
}

.search__input {
    /*width: 100%;*/
    /*padding: 1.315em 2em;*/
    /*color: #fff;*/
    /*border: 0;*/
    /*background: #515158;*/
    /*border-radius: 0;*/
    width: 90%;
    margin: 1em 5% 0 5%;
    padding: .5em 1em;
    color: #000;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 1em;
}

.search__input:focus {
    outline: none;
}

.label {
    position: absolute;
    top: 4em;
    right: 0;
}

.label__text {
    font-size: 0.85em;
    line-height: 1;
    display: block;
    padding: 1em;
    color: #e4e4e4;
}

.label__checkbox {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.label__checkbox:checked + .label__text {
    color: #515158;
}

.list {
    margin: 0 0 2em;
    padding: 0 1em 1em 2em;
    list-style: none;
}

.list__item {
    font-size: 1.05em;
    line-height: 1;
    position: relative;
    display: block;
}

.list__item:first-child {
    margin-top: 2em;
}

.grouped-by-category [data-category='1']:first-child,
.grouped-by-category :not([data-category='1']) + [data-category='1'],
.grouped-by-category [data-category='2']:first-child,
.grouped-by-category :not([data-category='2']) + [data-category='2'],
.grouped-by-category [data-category='3']:first-child,
.grouped-by-category :not([data-category='3']) + [data-category='3'],
.grouped-by-category [data-category='4']:first-child,
.grouped-by-category :not([data-category='4']) + [data-category='4'] {
    margin-top: 4em;
}

.grouped-by-category [data-category='1']:first-child::before,
.grouped-by-category :not([data-category='1']) + [data-category='1']::before,
.grouped-by-category [data-category='2']:first-child::before,
.grouped-by-category :not([data-category='2']) + [data-category='2']::before,
.grouped-by-category [data-category='3']:first-child::before,
.grouped-by-category :not([data-category='3']) + [data-category='3']::before,
.grouped-by-category [data-category='4']:first-child::before,
.grouped-by-category :not([data-category='4']) + [data-category='4']::before {
    font-size: 1.25em;
    position: absolute;
    top: -1.75em;
    left: 0;
    color: #c7c7c9;
}

.grouped-by-category [data-category='1']:first-child::before,
.grouped-by-category :not([data-category='1']) + [data-category='1']::before {
    content: attr(data-categoryname);
    color: #7cbf7f;
}

.grouped-by-category [data-category='2']:first-child::before,
.grouped-by-category :not([data-category='2']) + [data-category='2']::before {
    content: attr(data-categoryname);
    color: #6584c7;
}

.grouped-by-category [data-category='3']:first-child::before,
.grouped-by-category :not([data-category='3']) + [data-category='3']::before {
    content: attr(data-categoryname);
    color: #dc4b7c;
}

.grouped-by-category [data-category='4']:first-child::before,
.grouped-by-category :not([data-category='4']) + [data-category='4']::before {
    content: attr(data-categoryname);
    color: #8d65e0;
}

.list__item::after {
    content: attr(data-floor);
    font-size: 0.65em;
    line-height: 3;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 0.5em;
    pointer-events: none;
    color: #c7c7c9;
}

.list__link {
    font-size: 0.85em;
    display: block;
    padding: 0.5em 0.5em 0.5em 0;
}

.list__item--active .list__link,
.list__link:hover {
    color: #515158;
}

.list__item .list__link {
    padding-left: 2em;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.5em;
    /*filter: grayscale(100%);*/
    /*-webkit-filter: grayscale(100%);*/
}

.list__item[data-category="1"] .list__link {
    background-image: url("../img/category/left_1.png");
}

.list__item[data-category="2"] .list__link {
    background-image: url("../img/category/left_2.png");
}

.list__item[data-category="3"] .list__link {
    background-image: url("../img/category/left_3.png");
}

.list__item[data-category="4"] .list__link {
    background-image: url("../img/category/left_4.png");
}

/* Pins */
.level__pins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.level__pins--active {
    pointer-events: auto;
}

.pin {
    position: absolute;
    width: 8vmin;
    height: 8vmin;
    /*margin: -8.25vmin 0 0 -3.75vmin; /!* let the bottom tip be the reference point for individual coordinates *!/*/
    -webkit-transform: rotateZ(0deg) rotateX(0deg);
    transform: rotateZ(0deg) rotateX(0deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    pointer-events: none;
    transition: transform 300ms, opacity 300ms;
    opacity: 0;
    /*display: none;*/
}

.level__pins.level__pins--active .pin {
    /*display: block;*/
    opacity: 0.8;
    pointer-events: auto;
}

/*.pin.pin--active {*/
/*border-radius: 50%;*/
/*box-shadow: 0 0 8px 1px #FFFFFF;*/
/*}*/

.pin.pin--active,
.pin:hover {
    filter: brightness(180%) contrast(200%);
    -webkit-filter: brightness(180%) contrast(200%);
    /*border-radius: 50%;*/
    /*box-shadow: 0 0 8px 1px #FFFFFF;*/
    transform: scale(1.2);
}

.pin[data-category="0"] {
    background-image: url("../img/category/icon_0.png");
}

.pin[data-category="1"] {
    background-image: url("../img/category/icon_1.png");
}

.pin[data-category="2"] {
    background-image: url("../img/category/icon_2.png");
}

.pin[data-category="3"] {
    background-image: url("../img/category/icon_3.png");
}

.pin[data-category="4"] {
    background-image: url("../img/category/icon_4.png");
}

.pin__icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.level__pins--active .pin__icon {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.pin:nth-child(2) .pin__icon {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.pin:nth-child(3) .pin__icon {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.pin:nth-child(4) .pin__icon {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.pin:nth-child(5) .pin__icon {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.pin:nth-child(6) .pin__icon {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}

.pin:nth-child(7) .pin__icon {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.pin:nth-child(8) .pin__icon {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.pin:nth-child(9) .pin__icon {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.pin[data-category='0'] .icon--pin {
    fill: red;
}

.pin[data-category='1'] .icon--pin {
    fill: #7cbf7f;
}

.pin[data-category='2'] .icon--pin {
    fill: #6584c7;
}

.pin[data-category='3'] .icon--pin {
    fill: #dc4b7c;
}

.pin[data-category='4'] .icon--pin {
    fill: #8d65e0;
}

.pin--active .icon--pin {
    stroke: #FFF;
    stroke-width: 15px;
}

.icon--pin {
    width: 100%;
    height: 100%;
    opacity: .8;
}

.icon--logo {
    position: absolute;
    top: 11%;
    left: 25%;
    width: 50%;
    height: 50%;
    fill: white;
    fill-opacity: 0.6;
    -webkit-transition: fill-opacity 0.3s;
    transition: fill-opacity 0.3s;
}

.pin--active .icon--logo,
.pin:hover .icon--logo {
    fill-opacity: 1;
}

/* Pins for floor 1 */
.pin--1-1 {
    top: 45vmin;
    left: 10vmin;
}

.pin--1-2 {
    top: 26vmin;
    left: 47vmin;
}

.pin--1-3 {
    top: 46vmin;
    left: 83vmin;
}

.pin--1-4 {
    top: 40vmin;
    left: 77vmin;
}

.pin--1-5 {
    top: 33vmin;
    left: 38vmin;
}

.pin--1-6 {
    top: 6vmin;
    left: 27vmin;
}

.pin--1-7 {
    top: 36vmin;
    left: 61vmin;
}

.pin--1-8 {
    top: 9vmin;
    left: 59vmin;
}

.pin--1-9 {
    top: 8vmin;
    left: 51vmin;
}

/* Pins for floor 2 */
.pin--2-1 {
    top: 7vmin;
    left: 22vmin;
}

.pin--2-2 {
    top: 39vmin;
    left: 5vmin;
}

.pin--2-3 {
    top: 21vmin;
    left: 84vmin;
}

.pin--2-4 {
    top: 39vmin;
    left: 53vmin;
}

.pin--2-5 {
    top: 14vmin;
    left: 50vmin;
}

.pin--2-6 {
    top: 60vmin;
    left: 15vmin;
}

.pin--2-7 {
    top: 34vmin;
    left: 37vmin;
}

.pin--2-8 {
    top: 52vmin;
    left: 74vmin;
}

/* Pins for floor 3 */
.pin--3-1 {
    top: 17vmin;
    left: 15vmin;
}

.pin--3-2 {
    top: 42vmin;
    left: 5vmin;
}

.pin--3-3 {
    top: 19vmin;
    left: 85vmin;
}

.pin--3-4 {
    top: 61vmin;
    left: 57vmin;
}

.pin--3-5 {
    top: 58vmin;
    left: 25vmin;
}

.pin--3-6 {
    top: 30vmin;
    left: 57vmin;
}

.pin--3-7 {
    top: 32vmin;
    left: 37vmin;
}

/* Pins for floor 4 */
.pin--4-1 {
    top: 55vmin;
    left: 21vmin;
}

.pin--4-2 {
    top: 18vmin;
    left: 20vmin;
}

.pin--4-3 {
    top: 21vmin;
    left: 88vmin;
}

.pin--4-4 {
    top: 52vmin;
    left: 74vmin;
}

.pin--4-5 {
    top: 33vmin;
    left: 38vmin;
}

.pin--4-6 {
    top: 39vmin;
    left: 56vmin;
}

.pin--4-7 {
    top: 58vmin;
    left: 10vmin;
}

/* Pins for floor 5 */
.pin--5-1 {
    top: 55vmin;
    left: 21vmin;
}

.pin--5-2 {
    top: 18vmin;
    left: 20vmin;
}

.pin--5-3 {
    top: 21vmin;
    left: 88vmin;
}

.pin--5-4 {
    top: 52vmin;
    left: 74vmin;
}

.pin--5-5 {
    top: 33vmin;
    left: 38vmin;
}

.pin--5-6 {
    top: 39vmin;
    left: 56vmin;
}

.pin--5-7 {
    top: 58vmin;
    left: 10vmin;
}

/* Pins for floor 6 */
.pin--6-1 {
    top: 55vmin;
    left: 21vmin;
}

.pin--6-2 {
    top: 18vmin;
    left: 20vmin;
}

.pin--6-3 {
    top: 21vmin;
    left: 88vmin;
}

.pin--6-4 {
    top: 52vmin;
    left: 74vmin;
}

.pin--6-5 {
    top: 33vmin;
    left: 38vmin;
}

.pin--6-6 {
    top: 39vmin;
    left: 56vmin;
}

.pin--6-7 {
    top: 58vmin;
    left: 10vmin;
}

/* Mobile compatability */
.open-search,
.close-search {
    display: none;
}

@media screen and (max-width: 65.625em), screen and (max-height: 40.625em) {
    /*.main {*/
    /*width: 100vw;*/
    /*}*/
    /*.spaces-list,*/
    /*.search {*/
    /*width: 100vw;*/
    /*right: 100%;*/
    /*left: auto;*/
    /*}*/
    /*.spaces-list--open,*/
    /*.spaces-list--open .search {*/
    /*right: 0;*/
    /*z-index: 2;*/
    /*}*/
    /*.open-search,*/
    /*.close-search {*/
    /*position: absolute;*/
    /*display: block;*/
    /*top: 0;*/
    /*right: 0;*/
    /*z-index: 1000;*/
    /*}*/
    /*.mallnav {*/
    /*top: 4em;*/
    /*}*/
    /*.container {*/
    /*overflow: hidden;*/
    /*}*/
    /*.container--overflow {*/
    /*overflow: auto;*/
    /*}*/
    /*.content__item {*/
    /*overflow: auto;*/
    /*}*/
    /*.codrops-header {*/
    /*padding-right: 4em;*/
    /*text-align: left;*/
    /*color: white;*/
    /*}*/
}

.main {
    transition: all 1s;
}

body.asideDown .main {
    width: 100vw;
}

body.asideDown .spaces-list,
body.asideDown .search {
    width: 100vw;
    right: 100%;
    left: auto;
}

body.asideDown .spaces-list--open,
body.asideDown .spaces-list--open .search {
    right: 0;
    z-index: 2;
}

body.asideDown .open-search,
body.asideDown .close-search {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: 1000;
}

body.asideDown .mallnav {
    top: 4em;
}

body.asideDown .container {
    overflow: hidden;
}

body.asideDown .container--overflow {
    overflow: auto;
}

body.asideDown .content__item {
    overflow: auto;
}

/*body.asideDown .codrops-header {*/
/*padding-right: 4em;*/
/*text-align: left;*/
/*color: white;*/
/*}*/

.asideCtrl {
    position: absolute;
    right: 0;
    top: 45%;
    width: 1.6em;
    height: 3.85em;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #FFF;
    opacity: .6;
    border-top-left-radius: .6em;
    border-bottom-left-radius: .6em;
}

.asideCtrl:hover {
    opacity: .8;
}

.asideCtrl:after {
    content: '收起';
    writing-mode: vertical-lr;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: .875em;
}

body.asideDown .asideCtrl:after {
    content: '展开';
}

.pin.pin--active span, .pin:hover span {
    font-weight: bold;
    color: #FBAA01;
    text-shadow: 0 0 2px #000;
}

.pin span {
    display: block;
    position: absolute;
    white-space: nowrap;
    top: 1vmin;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    color: #ffffff;
    text-shadow: 0 0 2px blue;
    text-align: center;
}

#illustration {
    position: fixed;
    top: 5em;
    width: 10em;
    left: 0;
    color: #ffffff;
    padding-left: 2em;
    padding-top: 2em;
    pointer-events: none;
    /*background-color: rgba(94, 155, 189, 0.8);*/
}

#illustration .ilu_title {
    margin-bottom: 2.5em;
}

#illustration .ilu_item {
    height: 3em;
}

#illustration .ilu_icon {
    width: 2em;
    height: 1em;
    fill: #ffffff;
}

#multi_switch {
    color: #FFFFFF;
    position: absolute;
    left: 0;
    top: 27%;
    clear: both;
    transition: all 1s;
    opacity: 1;
}

/*.levels--open ~ #multi_switch {*/
/*opacity: 0;*/
/*visibility: hidden;*/
/*}*/

#multi_switch a {
    display: block;
    min-width: 6em;
    height: 6em;
    line-height: 2em;
    text-align: center;
    border-left: .8em solid rgba(0, 0, 0, 0);
    cursor: pointer;
    user-select: none;
    z-index: 9;
    pointer-events: auto;
    text-decoration: none;
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    padding-top: 4.5em;
    padding-left: .4em;
    color: #9897A0;
    margin-top: 1.5em;
    transition: all 500ms;
    font-size: .925em;
    transform: scale(.9)
}

#multi_switch a:nth-child(1) {
    background: url("../img/building/A_1.png") no-repeat .35em 0em;
    background-size: 5em;
}

#multi_switch a:nth-child(2) {
    background: url("../img/building/B_1.png") no-repeat .35em 0em;
    background-size: 5em;
}

#multi_switch a:nth-child(3) {
    background: url("../img/building/C_1.png") no-repeat .35em 0em;
    background-size: 5em;
}

#multi_switch a.active {
    /*pointer-events: none;*/
    color: #FFFFFF;
    border-left-color: #00CAFF;
    -webkit-filter: none; /* Chrome, Safari, Opera */
    filter: none;
    transform: scale(1);
}

#multi_switch a:hover {
    color: #FFFFFF;
    /*border-left-color: #00CAFF;*/
    -webkit-filter: none; /* Chrome, Safari, Opera */
    filter: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform: scale(1);
}

#addNew {
    position: absolute;
    right: 1em;
    bottom: 1em;
    color: #ffffff;
    display: none;
    z-index: 999;
    pointer-events: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.levels--open ~ #addNew {
    display: block;
}

#addNew.disable {
    opacity: .8;
    color: #CCCCCC;
    pointer-events: none;
    cursor: auto;
}

.pinBts {
    position: absolute;
    right: -1.8rem;
    top: 0;
    color: #000000;
    text-shadow: 0 0 2px #ffffff;
    font-size: .75rem;
    font-weight: bold;
}

.pinBts .pinBtn {
    color: #FFFFFF;
    text-shadow: none;
    font-size: .75rem;
    font-weight: normal;
    padding: .125rem .35rem;
    background: rgba(0, 0, 0, 0.6);
    margin-bottom: .15rem;
    border-radius: .2rem;
}

.pinBts .pinBtn:hover {
    opacity: .8;
}

.inputGroup {
    padding: .8em .6em;
    position: relative;
    font-size: .9em;
    min-width: 50vmin;
}

.inputGroup > .uf {
    padding-bottom: 1em;
    min-height: 3em;
}

.inputGroup .inputName {
    width: 4em;
    text-align: right;
    font-size: 1em;
}

.inputGroup input,
.inputGroup select,
.inputGroup textarea {
    border-radius: .2em;
    margin: 0;
    padding: 0 .2em;
    border: 1px solid #CCC;
    resize: none;
}

.inputGroup .submitBtn {
    border-radius: .2em;
    font-size: .9em;
    font-weight: bold;
    color: #ffffff;
    background-color: #32B06D;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    margin: 1.5em auto 0 auto;
}

.inputGroup .submitBtn:hover {
    opacity: .8;
}

#scaleSwitch {
    position: absolute;
    top: 4em;
    right: 7em;
    color: #ffffff;
    padding-left: 2em;
    padding-top: 2em;
    pointer-events: auto;
    display: none;
}

.levels--open ~ #scaleSwitch {
    display: block;
}

#scaleSwitch .switch {
    cursor: pointer;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border: 1px solid #f0f0f0;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.4);
}

.carRect {
}

.carRect ~ text {
    /*font-weight: bold;*/
    fill: yellow;
}

.carRect ~ text.w_vlr {
    writing-mode: vertical-lr;
}

.content__item-title[readonly],
.content__desc[readonly] {
    border: none;
    outline: none;
    background: none;
}

.content__item-title,
.content__desc {
    border: 1px solid #CCCCCC;
    border-radius: .2em;
    background: none;
}

.content__select {
    height: 1.5em;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    color: #FFFFFF;
    border-radius: .2em;
}

.content__select option {
    background-color: #333167;
}

.content__operate {
    padding-left: 2em;
}

.desc_edit,
.desc_delete {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: .8em;
    background-size: 1.5em;
    padding: .3em .8em .3em 2.5em;
    border-radius: 1.8em;
    font-size: 1em;
}

.desc_edit:hover,
.desc_delete:hover {
    opacity: .8;
}

.desc_edit {
    background-image: url("../img/icon/edit.png");
    background-color: #008ED3;
}

.desc_delete {
    background-image: url("../img/icon/delete.png");
    background-color: #3063CF;
}

/*定义滚动条宽*/
*::-webkit-scrollbar {
    width: 8px;
    height: 0;
}

/*定义滚动条的轨道*/
*::-webkit-scrollbar-track {
    background-color: #303942;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

/*定义滚动条的滑块*/
*::-webkit-scrollbar-thumb {
    background-color: #ffffff;
}

.allDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}

.uf {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.uf-ver {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.uf-f {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.uf-ac {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.uf-ae {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.uf-pc {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.uf-pe {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.uf-pj {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.uf-pja {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around;
}

.level:not(.level--current):hover {
    -o-animation: ani-big 500ms ease;
    -moz-animation: ani-big 500ms ease;
    -webkit-animation: ani-big 500ms ease;
    animation: ani-big 500ms ease;
    width: 110%;
    height: 110%;
    opacity: 1;
    transition: opacity 300ms;
    /*border: 1px dashed #CCCCCC;*/
}

/*.level:not(.level--current):hover ~ .level {*/
/*opacity: 0;*/
/*transition: opacity 300ms;*/
/*}*/

@-o-keyframes ani-big {
    from {
        width: 100%;
        height: 100%;
    }
    to {
        width: 110%;
        height: 110%;
    }
}

@-moz-keyframes ani-big {
    from {
        width: 100%;
        height: 100%;
    }
    to {
        width: 110%;
        height: 110%;
    }
}

@-webkit-keyframes ani-big {
    from {
        width: 100%;
        height: 100%;
    }
    to {
        width: 110%;
        height: 110%;
    }
}

@keyframes ani-big {
    from {
        width: 100%;
        height: 100%;
    }
    to {
        width: 110%;
        height: 110%;
    }
}